<template>
	<view>
		<view class="withdraw-head">
			<view class="withdraw-head-to">提现到</view>
			<view class="withdraw-head-way">
				<view class="withdraw-head-way-1">

					<!--  #ifdef  MP-WEIXIN -->
					<text class="way-text">当前微信账户</text>
					<!--  #endif -->
					<!-- #ifdef MP-TOUTIAO -->
					<text class="way-text">支付宝账户</text>
					<!--  #endif -->

					<text class="xiugai" @click="toState()">余额说明</text>
				</view>
			</view>
		</view>
		<view class="tixian">
			<view class="je">提现金额</view>

			<!-- #ifdef MP-TOUTIAO -->
			<view class="hsuru">
				<input v-model="user_phone" placeholder="请输入姓名" type="text"
					placeholder-style="color:#000;font-size: 18px;font-weight: bold;height:35px;" />
			</view>

			<view class="hsuru">
				<input v-model="user_name" placeholder="请输入支付宝账户" type="text"
					placeholder-style="color:#000;font-size: 18px;font-weight: bold;height:35px;" />
			</view>
			<!--  #endif -->

			<view class="hsuru">
				<view class="hu_l">
					<span>￥</span>
					<input v-model="num" placeholder="请输入整数提现金额"
						placeholder-style="color:#000;font-size: 18px;font-weight: bold;height:35px;" />
				</view>
			</view>
			<view class="yue" @click="temporarily()">
				<view class="yue_l">余额<span>￥{{yu}}</span></view>
				<view class="yue_l">暂不可提现余额<span>￥{{dj_yu}}</span></view>
			</view>
			<view class="yue">
				<view class="yue_l">可提现余额<span>￥{{ktx_yu}}</span></view>
				<view class="yue_r" @click="whole()"><span>全部提现</span></view>
			</view>
			<view class="yue"></view>
			<view class="qdtx" @click="qdtx" v-if="isTx">确定提现</view>
			<view class="qdtx hui" v-else>确定提现</view>
		</view>
		<!-- 回收标准弹框 -->
		<view class="modal-mask" catchtouchmove="preventTouchMove" v-if="isHsbz"></view>
		<view class="modal-dialog" v-if="isHsbz">
			<view class="modal-content">
				<view class="title">提现说明</view>
				<view>
					<text>温馨提示：</text>{{freeze_balance}}
				</view>
				<button @tap="toclose()">
					我知道了
				</button>
			</view>
		</view>
		<show-modal>
		</show-modal>

		<!-- 余额说明弹框 -->
		<view class="state-mask" catchtouchmove="preventTouchMove" v-if="isState"></view>
		<view class="state-dialog" v-if="isState">
			<view class="state-content">
				<image @tap="toclose()" class="close" :src='this.commonImg() + "close.png"'></image>
				<view class="title">余额说明</view>
				<view class="content">
					<rich-text :nodes="content">{{content}}</rich-text>
				</view>
				<button @tap="toclose()">
					好的
				</button>
			</view>
		</view>
	</view>
</template>
<script>
	import uniIcon from "@/components/uni/uni-icon/uni-icon.vue"
	export default {
		data() {
			return {
				num: '',
				yu: '',
				dj_yu: '',
				ktx_yu: '',
				account: "",
				user_phone:'',
				user_name:'',
				isTx: true,
				showModal: false,
				freeze_balance: '',
				freeze_status: 0,
				isHsbz: false,
				isState: false,
				content: '',
				userInfo: null
			};
		},
		onLoad(options) {
			this._load()
		},
		onShow() {

			uni.getStorage({
				key: 'selectZh',
				success: (e) => {
					this.account = e.data;
					uni.removeStorage({
						key: 'selectZh'
					})
				}
			})
			this.$api.http.get('common-privacy', {
				key: 'TX'
			}).then(res => {
				if (res.code == 1) {
					this.content = decodeURIComponent(res.data.content.content);
				}
			})
			uni.hideLoading();;
		},
		components: {
			uniIcon
		},
		computed: {
			bank_bg: function() {
				let type = this.index
				if (type == 1) {
					return 'renmin';
				}
				if (type == 2) {
					return 'nongye';
				}
				if (type == 3) {
					return 'gongshang';
				}
				if (type == 4) {
					return 'jianshe';
				}
				return '';
			}
		},
		methods: {
			temporarily() {
				this.$api.http.get('with-draw-list', {}).then(res => {
					if (res) {
						if (res.code == 1) {
							this.$api.msg('您的物品还在运输中，预计三天后到达工厂可提现;' + res.data.price + '订单属异常订单暂不可提现，详情请联系客服。');
						}
					}
				})
			},


			toclose() {
				this.isHsbz = false
				this.isState = false
			},
			toState() {
				this.isState = true
			},
			_load() {
				this.$api.http.get('user-info', {}).then(res => {
					if (res) {
						if (res.code == 1) {
							var userInfo = res.data.member;
							this.userInfo = userInfo
							var yu = userInfo.balance;
							var dj_yu = userInfo.freeze_balance;
							var ktx_yu = userInfo.fx_balance;
							if (!yu) {
								this.yu = '0.00'
							} else {
								this.yu = yu
							}
							if (!ktx_yu) {
								this.ktx_yu = '0.00'
							} else {
								this.ktx_yu = ktx_yu
							}
							if (!dj_yu) {
								this.dj_yu = '0.00'
							} else {
								this.dj_yu = dj_yu
							}
						}
					}
				})
			},

			qdtx() {
				
				// #ifdef MP-TOUTIAO
				if (!this.user_name) {
					this.$api.msg('请输入账户姓名！');
					return;
				}
				if (!this.user_phone) {
					this.$api.msg('请输入支付宝账户！');
					return;
				}
				
				// #endif
				
				var num = parseFloat(this.num)
				var yu = parseFloat(this.ktx_yu)
				if (num < 1 || !num) {
					this.$api.msg('请输入正确的提现金额，提现金额不可少于1元！');
					return;
				}
				if (num.toString().includes('.')) {
					this.$api.msg('请输入整数金额');
					return
				}


				if (this.userInfo.mobile !== '17614900990') {
					if (num >= 200) {
						this.$api.msg('提现金额不能超过200元');
						return;
					}
				} else {
					if (num > 1000) {
						this.$api.msg('提现金额不能超过1000元');
						return;
					}
				}
				// if (num >=200) {
				// 	this.$api.msg('提现金额不能超过200元');
				// 	return;
				// }

				if (num > yu) {
					this.$api.msg('提现金额超出可提现范围！');
				} else {
					this.isTx = false
					
					// #ifdef MP-WEIXIN
					this.$api.http.post('user-tx', {
						money: this.num,
					}).then(res => {
						if (res) {
							this.isTx = true
							if (res.code == 1) {
								
								if (wx.canIUse('requestMerchantTransfer')) {
								  wx.requestMerchantTransfer({
								    mchId: '1729883060',
								    appId: wx.getAccountInfoSync().miniProgram.appId,
								    package: res.data.package_info,
								    success: (res) => {
								      // res.err_msg将在页面展示成功后返回应用时返回ok，并不代表付款成功
								      console.log('success:', res);
									  this.$api.msg('提现成功')
									  setTimeout(() => {
									  	uni.navigateBack();
									  }, 1000);
								    },
								    fail: (res) => {
									this.$api.msg('提现失败')
								      console.log('fail:', res);
								    },
								  });
								} else {
								  wx.showModal({
								    content: '你的微信版本过低，请更新至最新版本。',
								    showCancel: false,
								  });
								}
								
								
								
								
							
							}
						}
					})
					// #endif
					

					// #ifdef MP-TOUTIAO
					this.$api.http.post('user-ali-tx', {
						user_phone:this.user_phone,
						user_name:this.user_name,
						money: this.num,
					}).then(res => {
						if (res) {
							this.isTx = true
							if (res.code == 1) {
								this.$api.msg('提交成功')
								setTimeout(() => {
									uni.navigateBack();
								}, 1000);
							}
						}
					})
					// #endif
					
					
					
					
					
				}
			},
			edit() {
				uni.navigateTo({
					url: '/pages/user/account/index?type=select'
				});
			},
			whole() {
				let floor = Math.floor(this.ktx_yu);
				this.num = floor
			}
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #ededed;
	}

	.content {
		margin: 0 4%;
		width: 92%;
		color: #333;
		font-size: 28upx;
		line-height: 48upx;
	}

	.content p {
		margin-top: 10rpx;
		text-indent: 2em;
	}

	.content p.bold {
		font-weight: bold;
	}

	.tixian {
		margin: 0 20px 20px 20px;
		background: #fff;
		padding: 20px 30px;

		.BH {
			height: 10px;
			background-color: #F8F8F8;
			margin: 0px 0 10px;
		}

		.je {
			padding: 10px;
			font-size: 14px;
		}

		.hsuru {
			border-bottom: 1px solid #F0F0F0;
			margin: 10px 10px 12px;
			padding: 10px 10px 10px 0;
		}

		.hu_l {
			line-height: 25px;
			position: relative;
			display: flex;
			align-items: center;
		}

		.hu_l input {
			font-size: 24px;
			font-weight: bold;
			padding-left: 35px;
		}

		.hu_l span {
			position: absolute;
			font-size: 24px;
			font-weight: bold;
		}

		.yue {
			margin: 0px 10px 20px;
			display: flex;
			justify-content: space-between;
			font-size: 12px;
			color: #b2b2b2;
		}

		.yue span {
			color: #F86744;
		}

		.qdtx {
			margin: 0 0 20px;
			border-radius: 10px;
			color: #fff;
			height: 45px;
			line-height: 45px;
			text-align: center;
			font-size: 16px;
			background: #3cbdc5;
		}

		.qdtx.hui {
			background: rgba(0, 0, 0, 0.2);
		}

		.card {
			background-color: #45AAF0;
			margin: 0px 20px 10px;
			border-radius: 10px;
			padding: 20px 10px;
			color: #fff;
			display: flex;
			box-shadow: 0px 5px 10px #A5CBEA;
		}

		.card_l {
			width: 20%;
			text-align: center;
		}

		.card_l img {
			width: 45px;
			height: 45px;
		}

		.card_r {
			width: 80%;

			.card_r_1 {
				font-size: 16px;
				padding-bottom: 10px;
			}

			.card_r_2 {
				font-size: 14px;
				padding-bottom: 20px;
			}

			.card_r_3 {
				font-size: 14px;
			}
		}

		.one {
			display: flex;
			justify-content: space-between;

			.t_tit {
				font-size: 20px;
				padding: 20px;
				font-weight: bold;
			}

			.head_btn {
				margin: 15px 20px 0px;
				border: 1px solid #F2F2F2;
				padding: 0px 15px;
				line-height: 25px;
				height: 25px;
			}
		}

		.gongshang {
			background-color: #C42B25;
		}

		.nongye {
			background-color: #008566;
		}

		.renmin {
			background-color: #E50012;
		}

		.jianshe {
			background-color: #003B8F;
		}
	}

	.withdraw-head {
		background-color: #f7f7f7;
		display: flex;
		align-content: center;
		padding: 20px 30px;
		font-size: 14px;
		margin: 20px 20px 0 20px;
		justify-content: space-between;

		.withdraw-head-way {
			display: flex;
			flex-direction: column;
			align-content: center;
			margin-left: 20px;

			.withdraw-head-way-1 {
				color: #576b95;
				margin-bottom: 10px;
				position: relative;

				.way-icon {
					width: 19px;
					height: 19px;
					margin-right: 5px;
					top: 0;
					left: 0;
					position: absolute;
				}

				.way-text {
					padding-left: 25px;
				}

				.xiugai {
					padding-left: 15px;
					color: #F86744;
				}
			}
		}
	}

	// 弹框样式
	.form {
		width: 100%;
		font-size: 28upx;
		position: fixed;
		top: 0;
		z-index: 999;
		display: none;

		&.show {
			display: block;

			.mask {
				animation: showPopup 0.2s linear both;
			}

			.layer {
				animation: showLayer 0.2s linear both;
			}
		}

		&.hide {
			display: block;

			.mask {
				animation: hidePopup 0.2s linear both;
			}

			.layer {
				animation: hideLayer 0.2s linear both;
			}
		}

		&.none {
			display: none;
		}

		.mask {
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 999;
			background-color: rgba(0, 0, 0, 0.9);
		}

		.popup {
			position: fixed;
			top: 20%;
			z-index: 1000;
			width: 80%;
			padding: 0 10%;

			h1 {
				text-align: center;
				font-size: 40rpx;
				color: #fff;
				margin-bottom: 40rpx;
			}
		}

		.username,
		.wechat,
		.code {
			width: calc(100% - 90upx);
			height: 90upx;
			display: flex;
			align-items: center;
			border-radius: 45upx;
			background-color: rgba(255, 255, 255, 0.3);
			padding: 0 45upx;
			margin-bottom: 26upx;

			input {
				width: 100%;
				height: 50upx;
				color: #fff;
				font-weight: 200;
			}
		}

		.btn {
			color: #f06c7a;
			width: 100%;
			height: 90upx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 45upx;
			background-color: #fff;
			font-size: 35upx;
		}

		.btn.close {
			border: 1px solid #fff;
			background: none;
			margin-top: 30rpx;
			color: #fff;
		}
	}

	.re {
		.username {
			position: relative;

			.get-code {
				position: absolute;
				height: 90upx;
				display: flex;
				align-items: center;
				justify-content: center;
				right: 0;
				padding: 0 40upx;
				z-index: 3;

				&:after {
					content: " ";
					width: 1upx;
					height: 50upx;
					background-color: #fff;
					position: absolute;
					z-index: 3;
					margin-right: 100%;
					left: 0;
					top: 20upx;
				}
			}
		}

		.res {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100upx;
			color: rgba(255, 255, 255, 0.8);
		}
	}

	/* ---弹窗css--- */
	.state-mask {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: #000;
		opacity: 0.5;
		overflow: hidden;
		color: #fff;
		z-index: 998;
	}

	.state-dialog {
		width: 72%;
		position: fixed;
		top: 15%;
		left: 14%;
		background: #fff;
		border-radius: 12rpx;
		z-index: 999;
	}

	.state-content {
		line-height: 40rpx;
		padding: 40rpx 30rpx;
		position: relative;

		.close {
			width: 24rpx;
			height: 24rpx;
			position: absolute;
			right: 30rpx;
			top: 48rpx;
		}

		.code {
			width: 100%;
		}

		.tishi {
			font-size: 28rpx;
			text-align: center;
		}

		.title {
			display: block;
			font-weight: bold;
			font-size: 30rpx;
			text-align: center;
			margin-bottom: 30rpx;
		}

		.show {
			width: 300rpx;
			height: 105rpx;
			display: block;
			margin: 50rpx auto 30rpx;
			z-index: 10000;
		}

		view {
			font-size: 26rpx;
			color: #333333;
			margin-bottom: 10rpx;
		}

		p {
			margin-bottom: 10rpx;

			text {
				font-weight: bold;
			}
		}

		button {
			width: 100%;
			height: 75rpx;
			border-radius: 10rpx;
			margin: 36rpx auto 0;
			font-size: 28rpx;
			color: #fff;
			background: #3cbdc5;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			padding: 0;
			box-sizing: border-box;
		}
	}
</style>